<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { DayRules, updateDayRule } from '@/utils/api';
const router = useRouter();
const { currentRoute } = useRouter();

const pageNum = ref(1);
const currentPage = ref(1);
const totalElements = ref(0);
const list = ref([]);
const date = ref('');
const ismf = ref(false);

const ruleFormRef = ref(null);
const ruleForm = ref({
    status: true,
    openTime: '',
    closeTime: '',
    maxNum: 0,
    id: ''
})


const formatProcessingTime = (data) => {
    console.log(data);
    if (data != null && data != '') {
        let datetime = new Date(data);
        let year = datetime.getFullYear();
        let month = datetime.getMonth() + 1;
        let date = datetime.getDate();

        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
            date = "0" + date;
        }
        return year + "-" + month + "-" + date;
    } else {
        return ""
    }
}


const openmf = function (data) {
    // let Obj = Object.assign({}, data);
    // Obj.date = [new Date(Obj.startDate), new Date(Obj.endDate)]
    // uId = Obj.id;
    ruleForm.value = Object.assign({}, data);
    ismf.value = true;
};


const rule = reactive({
    status: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    closeTime: [
        {
            required: true,
            message: '请选择结束时间',
            trigger: 'change',
        },
    ],
    maxNum: [
        { required: true, message: '请输入入园人数限制', trigger: 'blur' }
    ]

})

const handleSizeChange = (val) => {
    pageNum.value = val;
    getRuleInfo();
};

const getRuleInfo = async () => {
    console.log(formatProcessingTime(date.value));
    let params = {
        id: currentRoute.value.query.id,
        date: formatProcessingTime(date.value),
        pageNum: pageNum.value,
        pageSize: 10
    }
    let res = await DayRules(params)
    if (res.code == '200') {
        list.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            const pm = ruleForm.value;
            let params = {
                "id": pm.id,
                "status": pm.status, // 是否开园 默认开园 = true
                "openTime": pm.openTime, // 开园时间
                "closeTime": pm.closeTime, // 闭园时间
                "maxNum": pm.maxNum // 人数限制
            }
            updateDayRule(params).then(res => {
                if (res.code == '200') {
                    ElMessage({
                        message: '修改规则成功',
                        type: 'success',
                    })
                    getRuleInfo();
                    ismf.value = false;
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning',
                    })
                }
            })



        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields();
    ismf.value = false;
}


const resetData = () => {
    pageNum.value = 1;
    currentPage.value = 1;
    getRuleInfo();
}

onMounted(() => {
    getRuleInfo()
})

</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title" style="justify-content: space-between;">
            <div style="font-weight: 700;"><span>规则详情</span></div>
        </div>
        <div class="wls-aut-container" style="padding: .24rem;">
            <el-row>
                <el-col :span="12">
                    <el-date-picker v-model="date" @change="resetData" type="date" placeholder="选择日期" size="large" />
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button type="primary" @click.stop="router.go(-1)">返回</el-button>
                </el-col>
            </el-row>
            <div style="height: 0.16rem;"></div>
            <table>
                <thead>
                    <th>日期</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>入园人数限制</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(i, index) in list" :key="i.id">
                        <td>{{ i.date }}</td>
                        <td>{{ i.openTime }}</td>
                        <td>{{ i.closeTime }}</td>
                        <td>{{ i.maxNum }}</td>
                        <td><span @click.stop="openmf(i)" style="color: #387BFF;">修改</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <el-pagination v-model:current-page="currentPage" :page-size="10" :pager-count="5" :small="true"
            :disabled="false" background layout="total, prev, pager, next, jumper" :total="totalElements"
            @current-change="handleSizeChange" />

        <div class="hsq-popup" v-if="ismf">
            <div class="rule-form">
                <div class="hsq-popup-title">
                    <div class="hsq-popup-shu "></div>
                    <span>修改</span>
                </div>

                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rule" class="demo-ruleForm" label-position="top"
                    size="large" status-icon>
                    <el-form-item label="" prop="status">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :value="true">开园</el-radio>
                            <el-radio :value="false">闭园</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开始时间" prop="closeTime">
                                <el-time-select v-model="ruleForm.openTime" :max-time="ruleForm.workdayCloseTime"
                                    class="mr-4" placeholder="开始时间" start="06:00" step="00:30" end="22:30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束时间" prop="closeTime">
                                <el-time-select v-model="ruleForm.closeTime" :min-time="ruleForm.workdayOpenTime"
                                    placeholder="结束时间" start="06:00" step="00:30" end="22:30" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="入园人数限制" prop="maxNum">
                        <el-input-number v-model="ruleForm.maxNum" style="width: 100%;" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            确定
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<style scoped>
.rule-form {
    width: 5rem;
    padding: 0.24rem;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}
</style>
